<template>
  <div>
    <div class="rightcon">
      <!-- 房间列表 -->
      <div
        v-if="act == 'system_setting'"
        class="hot_rooms playing_songs my_songs search_songs"
      >
        <h3>系统设置</h3>

        <div class="con">
          <div class="one">
            <span class="title">通知声音</span>
            <el-switch
              v-model="value1"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div class="one">
            <span class="title">显示通知</span>
            <el-switch
              v-model="value2"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
    </div>
    <!-- <home></home> -->
  </div>
</template>

<script>
import {
  search,
  songList,
  mySongList,
  addSong,
  hotRooms,
} from "@/api/search/index";
import home from "@/views/home";
export default {
  components: {
    home,
  },

  data() {
    return {
      value1: "",
      value2: "",
      roomdata: [],
      messagelist: [],
      inputtext: "",
      sortdata: [
        {
          path: "search_songs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playing_songs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "my_songs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hot_rooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      input: "",
      songslist: [],
      alreadylist: [],
      mysongslist: [],
      hotrooms: [],
      act: "system_setting",
    };
  },

  created() {
    // 获取热门房间
    hotRooms({
      access_token: localStorage.getItem("access_token"),
      plat: "pc",
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.hotrooms = res.data;
    });
  },

  mounted() {},

  methods: {
    // 跳转到目标ID的房间
    toroom() {
      console.log(this.input);
      var index = false;
      index = false;
      this.hotrooms.forEach((el) => {
        if (el.room_id == this.input) {
          index = true;
        } else {
        }
      });
      console.log(index);
      if (index) {
        localStorage.setItem("room_id", this.input);
        this.$router.push({ name: "search_songs" });
      } else {
        this.$notify({
          title: "查找失败",
          message: "暂无查询此房间",
          type: "error",
        });
        this.input = "";
      }
    },
    // 左侧切换右侧
    change(id) {
      console.log(id);
      localStorage.setItem("room_id", id);
      this.$router.push({ name: "search_songs" });
    },
    // 搜索歌曲
    getsongs() {
      search({
        keyword: this.input,
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
      }).then((res) => {
        console.log(res);
        this.songslist = res.data;
      });
    },
    // 获取已点歌曲
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.rightcon {
  // 搜索歌曲列表
  .search_songs {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    width: 360px;
    height: 800px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 22;
  }
  h3 {
    height: 30px;
    width: 320px;
    text-align: left;
    padding: 10px 20px;
    background-color: #fff;
  }
  .con{
    width: 360px;
    height: 740px;
    background-color: #fff;
    overflow: hidden;
    margin-top: 10px;
    .one{
      padding: 0px 80px;
      margin-top: 20px;
      .title{
        margin: 0 30px;
      }
    }
  }
}
</style>